<template>
  <el-card class="basic-info">
    <div slot="header"><h2>基本资料</h2></div>
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
    >
      <!-- 登录名称（只读） -->
      <el-form-item label="登录名称" prop="loginName">
        <el-input v-model="form.loginName" disabled />
      </el-form-item>

      <!-- 昵称 -->
      <el-form-item label="昵称" prop="username">
        <el-input v-model="form.username" placeholder="请输入昵称" />
      </el-form-item>

      <!-- 工号 -->
      <el-form-item label="工号" prop="employeeId">
        <el-input v-model="form.employeeId" placeholder="请输入工号" />
      </el-form-item>

      <!-- 岗位 -->
      <el-form-item label="岗位" prop="position">
        <el-input v-model="form.position" placeholder="请输入岗位" />
      </el-form-item>

      <!-- 邮箱地址 -->
      <el-form-item label="邮箱地址" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱地址" />
      </el-form-item>

      <!-- 性别 -->
      <el-form-item label="性别" prop="gender">
        <el-select v-model="form.gender" placeholder="请选择性别">
          <el-option label="男" value="male" />
          <el-option label="女" value="female" />
        </el-select>
      </el-form-item>

      <!-- 头像 -->
      <el-form-item label="头像" prop="avatar">
        <el-upload
            class="avatar-uploader"
            action="/api/upload/avatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="form.avatar" :src="form.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-upload-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交修改</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref()

const form = reactive({
  loginName:  '',
  username:   '',
  employeeId: '',
  position:   '',
  email:      '',
  gender:     '' as 'male' | 'female' | '',
  avatar:     ''
})

const rules = {
  username: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { pattern: /^\S{2,20}$/, message: '昵称须 2-20 位', trigger: 'blur' }
  ],
  employeeId: [
    { required: true, message: '请输入工号', trigger: 'blur' }
  ],
  position: [
    { required: true, message: '请输入岗位', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email',   message: '邮箱格式不正确', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  avatar: [
    { required: true, message: '请上传头像', trigger: 'change' }
  ]
}

async function loadProfile() {
  try {
    const res = await axios.get('/api/user/profile')
    Object.assign(form, {
      loginName:  res.data.loginName,
      username:   res.data.username,
      employeeId: res.data.employeeId,
      position:   res.data.position,
      email:      res.data.email,
      gender:     res.data.gender,
      avatar:     res.data.avatarUrl
    })
  } catch {
    ElMessage.error('加载基本资料失败')
  }
}

function handleAvatarSuccess(res: any) {
  if (res.code === 0 && res.data.url) {
    form.avatar = res.data.url
  } else {
    ElMessage.error('头像上传失败')
  }
}

async function onSubmit() {
  try {
    await formRef.value.validate()
    await axios.put('/api/user/profile', {
      username:   form.username,
      employeeId: form.employeeId,
      position:   form.position,
      email:      form.email,
      gender:     form.gender,
      avatarUrl:  form.avatar
    })
    ElMessage.success('资料更新成功')
  } catch (err: any) {
    if (err instanceof Error) return
    ElMessage.error(err.response?.data?.message || '更新失败')
  }
}

onMounted(loadProfile)
</script>

<style scoped>
.basic-info {
  padding: 24px;
}
.avatar-uploader {
  width: 120px; height: 120px;
  border: 1px dashed #d9d9d9;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.avatar {
  width: 100%; height: 100%; object-fit: cover;
}
.avatar-upload-icon {
  font-size: 28px; color: #8c939d;
}
</style>
